{% assign data = section.settings %}
{% assign blockId = block_id | default: section.block_id %}

<div class="block_rich" id="block_rich-{{blockId}}">
  <div class="container_wrapper">
    <div class="content text-center md:max-w-[70%] relative mx-auto">
        {% if data.title != '' %}
            <div class="public_title">{{data.title}}</div>
        {%endif%}
        {% if data.detail != '' %}
            <div class="text_detail mt-5">{{data.detail}}</div>
        {% endif %}
        {% if data.btn_text != '' %}
            <div class="btn_wrap mt-5" style="--btn-color: {{data.btn_color}};--btn-bg: {{data.btn_bg}};">
              {% include 'btn',link: data.link,btn_text: data.btn_text %}
            </div>
        {% endif %}
    </div>
    </div>
</div>

<script>
$(function() {
	$(`#block_rich-{{blockId}}`).parent().prev().css('margin-bottom', `{{data.margin_top}}px`)
    $(`#block_rich-{{blockId}}`).parent().css('margin-bottom', `{{data.margin_bottom}}px`);
})
</script>

{% schema %}
{
	"class": "block_rich",
	"is_global": false,
	"icon": "icon-zidingyi",
	"name": {
		"zh_CN": "富文本",
		"en_US": "Rich text"
	},
	"blocks": [],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input_number",
			"max": 200,
			"min": 0,
			"id": "margin_top",
			"label": {
				"zh_CN": "上边距",
				"en_US": "Top margin"
			},
			"default": 80
		},
		{
			"type": "card_input_number",
			"max": 200,
			"min": 0,
			"id": "margin_bottom",
			"label": {
				"zh_CN": "下边距",
				"en_US": "Bottom margin"
			},
			"default": 80
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"default": "",
			"id": "title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "描述",
				"en_US": "Description"
			},
			"id": "detail",
			"default": ""
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "按钮文字",
				"en_US": "Button text"
			},
			"default": "",
			"id": "btn_text"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "按钮链接",
				"en_US": "Button link"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "link"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "颜色设置",
				"en_US": "Color Settings"
			}
		},
		{
			"type": "card_color",
			"id": "btn_color",
			"label": {
				"zh_CN": "按钮文字颜色",
				"en_US": "Button text color"
			},
			"default": "#fff"
		},
		{
			"type": "card_color",
			"id": "btn_bg",
			"label": {
				"zh_CN": "按钮背景颜色",
				"en_US": "Button background color"
			},
			"show-alpha": "false",
			"color-format": "rgb",
			"default": "rgba(223,86,65,1)"
		}
	],
	"default": {
		"settings": {
			"margin_top": 80,
			"margin_bottom": 80,
			"title": "Your title",
			"detail": "Use this text to share information about your brand with your customers.Describe a product, share announcements, or welcome customers to your store.",
			"btn_text": "Our products",
			"link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"btn_color": "#ffffff",
			"btn_bg": "rgba(223,86,65,1)"
		},
		"blocks": []
	}
}
{% endschema %}
